<template>
  <el-row :style="{ width: (contentWidth - 10) + 'px' }" :gutter="gutter">
    <el-col
      v-for="i in columnList"
      :id="i.id"
      :key="i.key"
      type="item"
      :span="i.span"
      :class="'rowItem' + (curKey == i.key ? ' chiose' : '')"
    >
      <component :is="i.key" :key="i.Id" :query="query" :extend="extend" :content-width="i.width" v-bind="i" />
    </el-col>
  </el-row>
</template>

<script>
import Vue from 'vue'
export default {
  components: {
  },
  props: {
    id: {
      type: String,
      default: null
    },
    item: {
      type: Object,
      default: null
    },
    children: {
      type: Array,
      default: null
    },
    title: {
      type: String,
      default: null
    },
    contentWidth: {
      type: Number,
      default: null
    },
    query: {
      type: Object,
      default: null
    },
    extend: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      gutter: 0,
      colNum: 1,
      columnList: [],
      curWidth: null,
      isInit: false
    }
  },
  computed: {},
  watch: {
    item: {
      handler(val) {
        if (val) {
          this.reset()
        } else {
          this.gutter = 0
          this.colNum = 0
        }
      },
      immediate: true
    }
  },
  mounted() {
  },
  methods: {
    format(control) {
      const t = {
        key: 'c_' + control.Id,
        id: control.Id,
        title: control.Name,
        width: control.WidthRatio,
        height: control.HeightGrid,
        show: control.Show,
        type: control.ControlType,
        code: control.Code,
        item: null,
        children: null
      }
      if (t.type === 0) {
        t.item = control.Statistics
      } else if (t.type === 1) {
        t.item = control.Chart ?? {}
      } else if (t.type === 4) {
        t.item = control.Table ?? {}
      } else if (t.type === 5) {
        t.item = control.Layout ?? {}
        if (control.Children != null && control.Children.length > 0) {
          t.children = control.Children.map(a => this.format(a))
        }
      } else if (t.type === 6) {
        t.item = control.ControlSet ?? {}
      } else if (t.type === 3) {
        t.item = control.Search ?? {}
      } else if (t.type === 2) {
        t.item = control.CensusTable ?? {}
      }
      Vue.component(t.key, function(resolve, reject) {
        require(['@/' + control.ControlPath + '.vue'], resolve)
      })
      return t
    },
    refresh() {
      const span = 24 / this.columnList.length
      const width = this.contentWidth / this.columnList.length - this.gutter
      this.curWidth = width
      this.columnList.forEach(t => {
        t.span = span
        t.width = width
      })
    },
    reset() {
      this.gutter = this.item.Gutter ?? 0
      if (this.isInit) {
        this.refresh()
        return
      }
      this.isInit = true
      if (this.children != null && this.children.length > 0) {
        const span = Math.floor(24 / this.children.length)
        const width = this.contentWidth / 24 * span - this.gutter
        this.curWidth = width
        this.columnList = this.children.map(e => {
          const t = this.format(e)
          t.span = span
          t.width = width
          return t
        })
      } else {
        this.curWidth = this.contentWidth
        this.columnList = []
      }
    }
  }
}
</script>
<style lang="css" scoped>
.rowItem {
  position: relative;
}
</style>
